<template>
	<view class="loginBox">
		<view class="content">
			<view class="btn" @click="checkAgree" v-if="!isAgree">微信授权一键登录</view>
			<button v-else class="btn active" open-type="getPhoneNumber" @getphonenumber="handleGetPhone">微信授权一键登录</button>

			<view class="read">
				<checkbox-group @change="checkChange">
					<label class="label">
						<checkbox value="A" />
						<text>我已阅读并同意</text>
					</label>
				</checkbox-group>
				<view class="word">
					<text class="blue" @click="goOther(2)">《用户协议》</text>
					和
					<text class="blue" @click="goOther(3)">《隐私政策》</text>
				</view>
			</view>
		</view>
		
		<!-- 首次登录注册 拿到用户头像和名称-->
		<uni-popup :mask-click="false" ref="popup" type="center">
			<view class="modal">
				<view class="tip">沙石小程序想要</view>
				<view class="tip" style="margin-top: 0;">获取您的昵称和头像</view>
				<view class="action">
					<view @click="cancel" class="btn">取消</view>
					<view @click="getUserProfile" class="btn active">同意</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getAuthLogin, getPhoneNumber } from '../../api/login/login.js';
export default {
	data() {
		return {
			isAgree: false,
			userInfo:{}
		};
	},
	onLoad() {},
	methods: {
		// 1.通过code获取手机号
		async handleGetPhone(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				let  {data}  = await getPhoneNumber({
					code: e.detail.code
				});
				// console.log(data);
				this.phoneNumber = data.phoneNumber;//2.将手机号 缓存在实例对象中
				// 3.如果之前已经注册过 证明已经拿到openid 存储一下 token
				if (data.register === 1) {  
					uni.setStorageSync('token', data.token);
					this.goPrev()
					return 	
				} else {
					this.$refs.popup.open()
				}
			}
		},
		// 4.获取用户头像和名称
		getUserProfile(){
			if(uni.getUserProfile){
				uni.getUserProfile({
					desc:"获取用户头像和名称",
					success:({userInfo}) => {
						// 再去获取 登录code
						// 注意 这里使用this 是因为箭头函数
						this.getUserCode(userInfo)
					}
				})
			}
		},
		// 5.调用后端登录接口
		getUserCode(userInfo) {
			uni.login({
				// 获取登录 code
				provider:"weixin",
				success:async ({code}) => {
					let {data} = await getAuthLogin({//授权登录 注册
						"avatar": userInfo.avatarUrl,
						"code": code,
						"nickName": userInfo.nickName,
						"phoneNumber": this.phoneNumber
					})
					console.log(data);
					if(data.success) {
						uni.setStorageSync('token',data.data)
						this.goPrev()
					}
					
				}
			})
		},
		checkAgree() {
			!this.isAgree && uni.showToast({
					title:"请同意用户协议和隐私政策"
				});
		},
		checkChange(e) {
			this.isAgree = e.target.value.length;
		},
		cancel(){
			this.$refs.popup.close();
			this.goPrev()
		},
		goPrev() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
.loginBox {
	min-height: 100vh;
	background-color: #212121;
	overflow: hidden;
}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 379rpx;

		.btn {
			width: 538rpx;
			height: 94rpx;
			background: #999999;
			border-radius: 47rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-weight: 500;
			color: #fffefe;

			&::after {
				display: none;
			}
			&.active {
				background-color: #101010;
				color: white;
			}
		}

		.read {
			display: flex;
			margin-top: 40rpx;
			align-items: center;
			color: #999;
			font-size: 27rpx;
			font-weight: 400;
		}
		label {
			display: flex;
			align-items: center;
		}
		.word {
			height: 56rpx;
			display: flex;
			align-items: center;
		}

		.blue {
			color: #4075c8;
		}
	}
	
	.modal {
		width: 538rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		color: #212121;
	
		.tip {
			margin-top: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}
	
		.action {
			margin-top: 50rpx;
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			// flex-direction: row;
		}
	
		.btn {
			width: 50%;
			border-radius: 0;
			background-color: #fff;
			text-align: center;
			color: rgba(0, 0, 0, 0.5);
			&.active {
				background: #212121;
				color: #fff;
			}
		}
	}
</style>
